<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
<style>
      .box{
           width: 300px;
           display: flex;
           margin: 0 auto;
      }
      ul{
          padding: 0;
          margin: 0;
          list-style: none;
      }
      a{
          color: inherit;
          font-size: inherit;
          text-decoration: none;
      }
      li{
          text-align: center;
          cursor: pointer;
      }
      .green{
           width: 100px;
           height: 30px;
           line-height: 30px;
           background-color: lightgreen;
      }.gray{
           width: 100px;
           height: 30px;
           line-height: 30px;
           background-color:#aaa;
      }
      .gray-box{
          border: 1px solid #aaa;
          display: none;

      }
      .gray-box li:hover{
          background-color: #aaa;
      }
      .gray-box li{
          border-bottom: 1px solid #aaa;
      }
</style>
</head>
<body>
    <ul class="box">
        <li class="green">选择项目:</li>
        <li class="gray"><a href="#">未选择</a>
            <ul class="gray-box">
                <li><a href="#">html5</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">java</a></li>
                <li><a href="#">jquery</a></li>
            </ul>
        </li>
    </ul>
    <script src="../0814/jquery.js"></script>
</body>
</html>
<script>
   $('.gray').on('click',function(){
     $('.gray-box').show();

        $('.gray-box li').mousedown(function(){
             $('.gray-box').css('display','none');
         $('.gray').children('a').html($(this).html());
         
          
     })
   })
</script>